<template>
    <!-- 
    <b-modal ref="my-modal" hide-footer title="Using Component Methods">
     <div class="d-block text-center">
       <h3>Hello From My Modal!</h3>
     </div>
     <b-button class="mt-3" variant="outline-danger" block @click="hideModal">Close Me</b-button>
     <b-button class="mt-2" variant="outline-warning" block @click="toggleModal">Toggle Me</b-button>
   </b-modal> 
    -->
    <!--
        VIDEOJS播放器
        body-class="modalStyle" 表示样式
        size="lg" 表示模态窗口大小 xl,lg,sm,full
        hide-footer 表示隐藏底部按钮
        hide-header 表示隐藏头部内容
        no-close-on-backdrop 表示鼠标点击背景不可关闭
        hide-header-close 表示隐藏头部关闭按钮
        centered 居中
        ok-title=“确定” 
        cancel-title=取消
        @ok="handleOk" 
        @cancel="handleCancel"
        scrollable 滚动条
        hide-backdrop 隐藏背景
        wrapClassName="ant-modal-cust-warp" 
        style="top:5%;height: 85%;overflow-y: hidden" 样式
        :modal-class="my-modal"
        dialog-class="modal-dialog"
        @hidden 关闭窗体触发事件
    -->
    <b-modal ref="my-modal" 
            :title="title" 
            scrollable 
            header-class="videoClass"
            modal-class = "videoClass"
            :header-bg-variant="headerBgVariant"
            :body-bg-variant="bodyBgVariant"
            :body-text-variant="bodyTextVariant"
            :footer-bg-variant="footerBgVariant"
            :footer-text-variant="footerTextVariant"
            content-class="fullWinBody" 
            @hidden="onHidden" size="fullWin" 
            hide-footer 
            no-close-on-backdrop>
        <div class="d-block text-center">
            <div class="form-group m-form__group row">
                <div class="col-md-10">
                    <video :style="videoStyle" id="videoPlayer" class="video-js" :state="viewVideo">您的浏览器太旧，不支持HTML5视频。</video>
                </div>
                <div class="col-md-2" >
                    <div style="background: #181C32;border-radius: 15px;">
                        <div>
                            <div>
                                <a style="font-size: 16px;color: #fff;font-weight: 100;text-decoration: none;">云台控制</a>
                            </div>
                            <ul class='pie'>
                                <li class='slice-one slice'>
                                    <a id="1" href="javascript:void(0)" @onmousedown="controlPTZ(1,'TILT_UP')" title="向上" @onmouseup="controlPTZ(0,'TILT_UP')">
                                        <img :src="require('@/assets/images/up.png')" alt="">
                                    </a>
                                </li>
                                <li class='slice-two slice'>
                                    <a id="2" href="javascript:void(0)" @onmousedown="controlPTZ(1,'UP_RIGHT')" title="右上" @onmouseup="controlPTZ(0,'UP_RIGHT')">
                                        <img :src="require('@/assets/images/up.png')" alt="">
                                    </a>
                                </li>
                                <li class='slice-three slice'>
                                    <a id="3" href="javascript:void(0)" @onmousedown="controlPTZ(1,'PAN_RIGHT')" title="向右" @onmouseup="controlPTZ(0,'PAN_RIGHT')">
                                        <img :src="require('@/assets/images/up.png')" alt="">
                                    </a>
                                </li>
                                <li class='slice-four slice'>
                                    <a id="4" href="javascript:void(0)" @onmousedown="controlPTZ(1,'DOWN_RIGHT')" title="右下" @onmouseup="controlPTZ(0,'DOWN_RIGHT')">
                                        <img :src="require('@/assets/images/up.png')" alt="">
                                    </a>
                                </li>
                                <li class='slice-five slice'>
                                    <a id="5" href="javascript:void(0)" @onmousedown="controlPTZ(1,'TILT_DOWN')" title="向下" @onmouseup="controlPTZ(0,'TILT_DOWN')">
                                        <img :src="require('@/assets/images/up.png')" alt="">
                                    </a>
                                </li>
                                <li class='slice-six slice'>
                                    <a id="6" href="javascript:void(0)" @onmousedown="controlPTZ(1,'DOWN_LEFT')" title="左下" @onmouseup="controlPTZ(0,'DOWN_LEFT')">
                                        <img :src="require('@/assets/images/up.png')" alt="">
                                    </a>
                                </li>
                                <li class='slice-seven slice'>
                                    <a id="7" href="javascript:void(0)" @onmousedown="controlPTZ(1,'PAN_LEFT')" title="向左" @onmouseup="controlPTZ(0,'PAN_LEFT')">
                                        <img :src="require('@/assets/images/up.png')" alt="">
                                    </a>
                                </li>
                                <li class='slice-eight slice'>
                                    <a id="8" href="javascript:void(0)" title="左上" @onmousedown="controlPTZ(1,'UP_LEFT')" @onmouseup="controlPTZ(0,'UP_LEFT')">
                                        <img :src="require('@/assets/images/up.png')" alt="">
                                    </a>
                                </li>
                                <a class="center" href="javascript:void(0)" @onmousedown="controlPTZ(0,'ZOOM_OUT')" title="停止转动" @onmouseup="controlPTZ(0,'ZOOM_OUT')"></a>
                            </ul>
                        </div>
                        <div class="row" style="padding:5px 15px 5px 15px;">
                            <a style="font-size: 14px;color: #fff ;margin-top: 5px;font-weight: 100;text-decoration: none;">变倍:</a>
                            <a style="margin-left: 15px;" id="d" href="javascript:void(0)" title="放大">
                                <img :src="require('@/assets/images/d.png')" alt="">
                            </a>
                            <a style="margin-left: 15px" id="x" href="javascript:void(0)" title="缩小">
                                <img :src="require('@/assets/images/x.png')" alt="">
                            </a>
                        </div>
                        <div class="row" style="margin-top: 11px;padding:5px 15px 5px 15px;">
                            <a style="font-size: 14px;color: #fff;font-weight: 100;margin-top: 5px;text-decoration: none;">焦距:</a>
                            <a style="margin-left: 15px" id="y" href="javascript:void(0)" title="远焦距">
                                <img :src="require('@/assets/images/y.png')" alt="">
                            </a>
                            <a style="margin-left: 15px" id="j" href="javascript:void(0)" title="近焦距">
                                <img :src="require('@/assets/images/j.png')" alt="">
                            </a>
                        </div>

                        <div class="row" style="margin-top: 11px;padding:5px 15px 5px 15px;">
                            <a style="font-size: 14px;color: #fff;font-weight: 100;margin-top: 5px;text-decoration: none;">倍速:</a>
                            <el-select v-model="speed" placeholder="倍速" style="margin-left: 15px;width: 100px;">
                                <el-option v-for="item in speedOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                            <!-- 
                            <a style="margin-left: 15px" id="m" href="javascript:void(0)" title="慢">
                                <img :src="require('@/assets/images/m.png')"  alt="">
                            </a>
                            <a style="margin-left: 15px" id="z" href="javascript:void(0)" title="中">
                                <img :src="require('@/assets/images/z.png')" alt="">
                            </a>
                            <a style="margin-left: 15px" id="k" href="javascript:void(0)" title="快">
                                <img :src="require('@/assets/images/k.png')" alt="">
                            </a> 
                            -->
                        </div>

                        <div class="row" style="margin-top: 11px;padding:5px 15px 5px 15px;">
                            <a style="font-size: 14px;color: #fff;margin-top: 5px;font-weight: 100;text-decoration: none;">操作:</a>
                            <a style="margin-left: 15px" id="sx" @click="transcribeVideo" href="javascript:void(0)" :title="transcribeText">
                                <img :src="require('@/assets/images/lp.png')" :alt="transcribeText">
                            </a>
                            <a style="margin-left: 15px" id="zx" @click="screenShot" href="javascript:void(0)" title="截图">
                                <img :src="require('@/assets/images/jt.png')" alt="截图">
                            </a>
                        </div> 

                        <!-- 
                        <div class="row" style="margin-top: 11px;padding-top:5px;padding-left: 15px;padding-right: 15px;">
                            <a style="font-size: 18px;color: #fff;;text-decoration: none;">镜像:</a>
                            <a style="margin-left: 15px" id="sx" href="javascript:void(0)" title="上下">
                                <img src="/static/img/sx1.png" alt="">
                            </a>
                            <a style="margin-left: 15px" id="zx" href="javascript:void(0)" title="中心">
                                <img src="/static/img/zx1.png" alt="">
                            </a>
                            <a style="margin-left: 15px" id="zy" href="javascript:void(0)" title="左右">
                                <img src="/static/img/zy2.png" alt="">
                            </a>
                        </div> 
                        -->
                    </div>
                </div>
            </div>
            <template slot="modal-footer">
                
            </template>
        </div>
    </b-modal>
</template>
<script>
import apiUtil from "@/core/util/apiUtil.js";
import videojs from "video.js";
import 'video.js/dist/video-js.css';
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
export default {
    data() {
        return {
            title: "实时监控",
            device_id: "",
            loadMsg: true,
            transcribeText: '录屏',
            iframeSrc: process.env.BASE_URL + "deng/view/iot/graph-preview/index.html",
            height: KTUtil.getViewPort().height - 120,
            videoStyle:{width:"100%",height:"100%","object-fit": "fill"},
            viewVideo: false,
            videoPlayer: null,
            httpURL: null,
            speed: "1",
            speedOptions: [
                {
                    value: '1',
                    label: '倍速1'
                }, {
                    value: '2',
                    label: '倍速2'
                }, {
                    value: '3',
                    label: '倍速3'
                }, {
                    value: '4',
                    label: '倍速4'
                }, {
                    value: '5',
                    label: '倍速5'
                }
            ],
            controlForm: { start: null, pztType: null },
            headerBgVariant: 'dark',
            bodyBgVariant: 'dark',
            bodyTextVariant: 'light',
            footerBgVariant: 'dark',
            footerTextVariant: 'dark'
        }
    },
    components: {
    },
    watch: {
    },
    mounted() {

    },
    methods: {
        showModal(row) {
            this.$refs['my-modal'].show();
            this.device_id = "";
            this.title = "实时监控";
            this.iframeSrc = process.env.BASE_URL + "deng/view/iot/graph-preview/index.html";
            if (null != row && undefined != row) {
                this.device_id = row.device_id;
                this.title = "实时监控【" + row.name + "】";
                this.iframeSrc = process.env.BASE_URL + "deng/view/iot/graph-preview/index.html?graph_site_id=" + row.graph_site_id
            }
            setTimeout(() => {
                apiUtil.get(process.env.VUE_APP_MONITOR_API + "/iotDevice/get/" + row.device_id).then(({ data }) => {
                    let transcribe = data.data.transcribe;
                    if (transcribe == 1) {//当前状态为停止 则可开启录制
                        this.transcribeText = '停止录屏';
                    } else {
                        this.transcribeText = '录屏';
                    }
                    apiUtil.get(process.env.VUE_APP_MONITOR_API + "/play/" + row.device_id).then(({ data }) => {
                        this.httpURL = data.data.httpURL;
                        this.initVideo();
                    });
                });
            }, 100);
        },
        hideModal() {
            this.$refs['my-modal'].hide()
        },
        toggleModal() {
            // 当模态已隐藏时，我们传递要返回焦点的按钮的ID
            this.$refs['my-modal'].toggle('#toggle-btn')
        },
        onHidden() {//关闭窗体触发事件
            this.$emit("change", null);

        },
        //播放
        initVideo() {
            if (this.videoPlayer) {
                this.videoPlayer.pause();
                this.videoPlayer.dispose();
            }
            // this.httpURL = "http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8";
            this.httpURL="http://demo.sucaihuo.com/modals/56/5672/demo/webm/CAMERAV.webm"
            // this.httpURL = "https://www.sicau.edu.cn/__local/A/1E/52/E8093449CF93AF4E8960C131C04_09BD5DD1_1F12F030.mp4?e=.mp4";
            let options = {
                playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
                autoplay: true, // 如果true,浏览器准备好时开始播放。
                muted: true, // 默认情况下将会消除任何音频。
                loop: true, // 导致视频一结束就重新开始。
                preload: 'auto', // auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: 'zh-CN',  //汉化
                aspectRatio: '4:3', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，播放器将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [
                    // {
                    //     src: this.httpURL,  //视频播放地址
                    //     type: 'application/x-mpegURL', //m3u8流
                    // },
                    // {
                    //     src: this.httpURL, // 视频播放地址
                    //     type: 'video/mp4' // 类型
                    // },
                    {
                        src: this.httpURL, // 视频播放地址
                        type: 'video/webm'
                    }
                ],
                poster: 'https://alm.htd.cn/alm-yfzx/static/img/login_right.e1f6c7f9.png', //封面地址
                notSupportedMessage: '此视频暂无法播放，请稍后再试', // 无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: true,
                    durationDisplay: true,  //视频时长时间显示
                    remainingTimeDisplay: false,  //剩余时间显示
                    fullscreenToggle: true // 全屏按钮
                },
                errorDisplay: false,  //错误显示
                posterImage: false,  //视频的预览海报图片显示
                bigPlayButton: true,  //视频中间的播放按钮显示
                textTrackDisplay: false
            };
            this.videoPlayer = videojs("videoPlayer", options,
                function onPlayerReady() {
                    console.log("onPlayerReady 中的this指的是：", this); // 这里的this是指Player,是由Videojs创建出来的实例
                    console.log(videoPlayer === this); // 这里返回的是true
                });
        },
        //停止播放
        videoPause() {
            if (null != this.videoPlayer) {
                this.viewVideo = false;
                this.videoPlayer.dispose()
                this.loadMsg = true;
            }
        },
        controlPTZ(start, pztType) {
            this.controlForm.start = start;
            this.controlForm.pztType = pztType;
            apiUtil.post(process.env.VUE_APP_MONITOR_API + "/ptz/control", this.controlForm).then(({ data }) => {
                if (data.success) {
                } else {
                    handleAlert("操作失败", "error", 3);
                }
            });
        },
        screenShot() {//截图
            apiUtil.get(process.env.VUE_APP_MONITOR_API + "/screenShot/" + this.device_id).then(({ data }) => {
                handleAlert("操作成功", "success", 3);
            });
        },
        transcribeVideo() {//录屏
            apiUtil.get(process.env.VUE_APP_MONITOR_API + "/iotDevice/get/" + this.device_id).then(({ data }) => {
                let transcribe = data.data.transcribe;
                if (transcribe == 0 || transcribe == null || transcribe == '') {//当前状态为停止 则可开启录制
                    this.$confirm("确定录制视频?", "提示", { type: "warning", }).then(() => {
                        apiUtil.get(process.env.VUE_APP_MONITOR_API + "/transcribe/" + this.device_id).then(({ data }) => {
                            if (data.data.success) {
                                this.transcribeText = '停止录制'
                                handleAlert("录制成功", "success", 3);
                            } else {
                                handleAlert("录制失败", "error", 3);
                            }
                        });
                    }).catch(() => { });//注意这里，这里是重点！！！;        
                }
                if (transcribe == 1) {
                    this.$confirm("确定暂停录制视频?", "提示", { type: "warning", }).then(() => {
                        apiUtil.get(process.env.VUE_APP_MONITOR_API + "/transcribe/" + this.device_id).then(({ data }) => {
                            if (data.data.success) {
                                this.transcribeText = '录屏'
                                handleAlert("停止录制成功", "success", 3);
                            } else {
                                handleAlert("停止录制失败", "error", 3);
                            }
                        });
                    }).catch(() => { });//注意这里，这里是重点！！！;      
                }
            });
        },
    },
}
</script>
<style scoped>
/* 隐藏播放、暂停等各类播放器功能按钮 */
video::-webkit-media-controls-fullscreen-button {
    display: none;
}

video::-webkit-media-controls-play-button {
    display: none;
}

video::-webkit-media-controls-timeline {
    display: none;
}

video::-webkit-media-controls-current-time-display {
    display: none;
}

video::-webkit-media-controls-time-remaining-display {
    display: none;
}

video::-webkit-media-controls-mute-button {
    display: none;
}

video::-webkit-media-controls-toggle-closed-captions-button {
    display: none;
}

video::-webkit-media-controls-volume-slider {
    display: none;
}

video::-webkit-media-controls-enclosure {
    display: none;
}

.pie {
    position: relative;
    margin: 0px auto;
    padding: 0;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    list-style: none;
    overflow: hidden;
    background: url('~@/assets/images/background.png') no-repeat center center / 80% 80%;
}

.center {
    position: absolute;
    width: 70px;
    height: 70px;
    top: 50px;
    left: 50px;
    border-radius: 50%;
    background: url('~@/assets/images/sx.png') no-repeat center center / 60% 60%;

}
.slice {
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 50%;
    transform-origin: 0% 100%;
}

.slice-one {
    transform: rotate(329deg) skewY(-45deg);
}

.slice-one img {
    transform: skewY(45deg) rotate(31deg);
    margin-top: 52px;
    /* margin-left: 17px; */
}

.slice-two {
    transform: rotate(18deg) skewY(-45deg);

}

.slice-two img {
    transform: skewY(45deg) rotate(32deg);
    margin-top: 52px;
    /* margin-left: 17px; */
}

.slice-three {
    transform: rotate(63deg) skewY(-45deg);

}

.slice-three img {
    transform: skewY(45deg) rotate(27deg);
    margin-top: 52px;
    /* margin-left: 17px; */
}

.slice-four {
    transform: rotate(104deg) skewY(-45deg);

}

.slice-four img {
    transform: skewY(45deg) rotate(31deg);
    margin-top: 52px;
    /* margin-left: 17px; */
}

.slice-five {
    transform: rotate(148deg) skewY(-45deg);

}

.slice-five img {
    transform: skewY(45deg) rotate(33deg);
    margin-top: 52px;
    /* margin-left: 17px; */
}

.slice-six {
    transform: rotate(192deg) skewY(-45deg);

}

.slice-six img {
    transform: skewY(45deg) rotate(33deg);
    margin-top: 52px;
    /* margin-left: 17px; */
}

.slice-seven {
    transform: rotate(236deg) skewY(-45deg);

}

.slice-seven img {
    transform: skewY(45deg) rotate(34deg);
    margin-top: 52px;
    /* margin-left: 17px; */
}

.slice-eight {
    transform: rotate(280deg) skewY(-45deg);

}

.slice-eight img {
    transform: skewY(45deg) rotate(32deg);
    margin-top: 52px;
    /* margin-left: 17px; */
}
/deep/ .videoClass > .modal-dialog > .modal-content > .modal-header {
  /* background-color: #000 !important; */
  color: #fff !important;
}
/deep/ .modal .modal-header .modal-title {
    color: #fff !important;
}
</style>